<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>码猿技术专栏-时间轴</title>
  <link href="../static/images/me.jpg" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/timeline.css" th:href="@{/css/timeline.css}">
</head>
<body>

  <!--导航-->
  <nav class="gird-header">
    <div class="ui container">
      <div class="ui inverted secondary stackable menu">
        <h2 class="ui olive header item" style="font-family: STSong">码猿技术专栏</h2>
        <!--<div class="right m-item item m-mobile-hide">-->
          <a href="index.html" class="m-item item m-mobile-hide "><i class="home icon"></i>首页</a>
          <a href="types.html" class="m-item item m-mobile-hide"><i class="clone outline icon"></i>分类</a>
          <a href="archives.html" class="active m-item item m-mobile-hide"><i class="clock icon"></i>时间轴</a>
          <a href="music.html" class="m-item item m-mobile-hide"><i class="music icon"></i>音乐盒</a>
          <a href="message.html" class="m-item item m-mobile-hide"><i class="book icon"></i>留言板</a>
          <a href="friends.html" class="m-item item m-mobile-hide"><i class="pencil alternate icon"></i>友人帐</a>
          <a href="picture.html" class="m-item item m-mobile-hide"><i class="image icon"></i>照片墙</a>
          <a href="about.html" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
        <div class="right m-item item">
          <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
            <input style="color: white" type="text" name="query" id="query"   placeholder="Search....">
            <i class="search link icon" onclick="search()"></i>
          </div>
        </div>
      </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
      <i class="sidebar icon"></i>
    </a>
  </nav>

<!--时间轴内容-->
  <div class="doc-container m-padded-tb-massivex m-opacity" id="doc-container">
      <th:block >
        <section class="timeline">
          <ul id="articles">
          </ul>
        </section>
      </th:block>
  </div>



  <!--底部栏-->
  <footer class="ui inverted vertical segment m-padded-tb-massive m-opacity" id="footer">
  </footer>


  <script src="https://unpkg.zhimg.com/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-30-M/semantic-ui/2.2.4/semantic.js"></script>
  <script src="../static/lib/timeline/timeline.js" th:src="@{/lib/timeline/timeline.js}"></script>
  <script src="../static/js/front/js/nav.js"></script>
  <script src="../static/js/front/js/footer.js"></script>
  <script src="../static/js/front/js/archives.js"></script>
</body>
</html>